<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //获取元素的传统方式  3种
        //javascript  入口函数  onload  元素渲染完成后才会执行
        window.onload = function(){
        var list =document.getElementById('list');
    console.log(list);
// 1.通过id
var list =document.getElementById('list');
console.log(list);
// 2.通过class
var list = window.document.getElementsByClassName('item');
console.log(list);
// 3.通过标签名称
var uls =document.firstChild('ul');
console.log(uls);

//html5中新增的两个
var li =document.querySelectorAll('li');
console.log(li);
var lis =document.querySelectorAll('.item>p');
console.log(lis);



/*
  节点类型                  节点类型值nodeType   节点名称nodeName           节点值

  元素节点                        1
  属性节点    ul下的id叫属性       2              字符串属性名称 小写         属性值
  文本节点                        3               "#text"                   内容值本身       
  注释节点                        8                "#comment"               注释内容    
  文档节点                        9                 "#document"                


*/









    }
    </script>
</head>
<body>
    <ul id="list">
        <!-- <li>li1</li>
        <li>li2</li>
        <li>li3</li> -->
        <li class="item">li1</li>
        <li class="item">li2</li>
        <li class="item">li3</li>
    </ul>
<ul id="list2">
    <li class="item">li1</li>
    <li class="item">li2</li>
    
    <li class="item">li3</li>
    <li class="item">li4</li>
</ul>

</body>

</html>